<template>
  <div class="file-folder-select">
    <MyDialog
      :title="DialogVisibleconfig.title"
      v-model="DialogVisibleconfig.visible"
      :buttons="DialogVisibleconfig.buttons"
      :showClose="true"
      width="500px"
    >
      <div class="nav">
        <MyNavigation
          :dataList="navData"
          @watchFolderFiles="watchFolderFiles"
        ></MyNavigation>
      </div>
      <div class="folder-list" v-if="folderList.length > 0">
        <div
          class="folder-item"
          v-for="(item, index) in folderList"
          :key="index"
          :class="{ selected: index === selectedFolderIndex }"
          @click="selectFolder(item, index)"
        >
          <Icon :fileType="0"> </Icon>
          <span class="folder-item-inner-name">{{ item.fileName }}</span>
        </div>
      </div>
      <div class="folder-list-empty" v-else>
        <div class="folder-item-empty-inner">
          <el-icon name="document"></el-icon>
          <span> 这里面没有文件夹了哦,确定要移动到这里吗? </span>
        </div>
      </div>
    </MyDialog>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  onUnmounted,
  onMounted,
} from "vue";
import MyNavigation from "./MyNavigation.vue";
const { proxy } = getCurrentInstance();

const showFolderdialog = (currentFolderId) => {
  DialogVisibleconfig.value.visible = true;
  selectedFolderIndex.value = 0;
  //当前目录pid =currentFileIds
  currentFileIds.value = currentFolderId;
  initLoadAllfolder(filePid.value, currentFileIds.value);
};
defineExpose({ showFolderdialog });

const api = {
  loadAllFolder: "/file/loadAllFolder",
};
const DialogVisibleconfig = ref({
  visible: false,
  title: "移动到",
  buttons: [
    {
      text: "取消",
      type: "default",
      click: () => {
        DialogVisibleconfig.value.visible = false;
      },
    },
    {
      text: "确定",
      type: "primary",
      click: () => {
        DialogVisibleconfig.value.visible = false;

        FolderSelectSubmitEvent();
      },
    },
  ],
});
const filePid = ref("0");
const folderList = ref([]);
const currentFileIds = ref();
const currentFile = ref({});
const navData = ref([]);
const initLoadAllfolder = async (filePid, currentFileIds = null) => {
  let result = await proxy.request({
    url: api.loadAllFolder,
    params: {
      filePid,
    },
  });
  if (!result) {
    return;
  }
  folderList.value = result.data;
};
const selectedFolderIndex = ref(0);
const selectFolder = async (item, index) => {
  selectedFolderIndex.value = index;
  filePid.value = item.fileId;
  currentFileIds.value = item.fileId;
  navData.value.push({
    fileId: item.fileId,
    fileName: item.fileName,
  });
  initLoadAllfolder(item.fileId, item.filePid);
};
const watchFolderFiles = async (item) => {
  if (currentFileIds.value === item.fileId) {
    return;
  } else {
    const exists = navData.value.some((item) => item.fileId === item.fileId);
    if (!exists && item.fileId != 0) {
      navData.value.push({
        fileName: item.fileName,
        fileId: item.fileId,
      });
    } else {
      if (item.fileId == 0) {
        navData.value = [];
      }
      // 删除该 fileId 及其之后的所有项
      const index = navData.value.findIndex(
        (item) => item.fileId === item.fileId
      );
      if (index !== -1) {
        navData.value = navData.value.slice(0, index + 1);
      }
    }
  }
  initLoadAllfolder(item.fileId);
};

const FolderSelectSubmitEvent = () => {
  proxy.confirm("确定移动到该文件夹吗？", () => {
    emit("FolderSelectSubmitEvent", filePid.value);
    navData.value = [];
    folderList.value = []; // 重置文件夹列表
    filePid.value = "0"; // 重置文件夹ID
  });
};
const emit = defineEmits(["FolderSelectSubmitEvent"]);
onUnmounted(() => {});
onMounted(() => {});
</script>

<style lang="scss" scoped>
// 斑马纹效果
.folder-item:nth-child(odd) {
  background-color: #f9f9f9; // 奇数行背景颜色
}

.folder-item:nth-child(even) {
  background-color: #ffffff; // 偶数行背景颜色
}
.folder-item {
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 5px;
  padding: 10px;
  transition: background-color 0.5s ease, transform 0.3s ease;
  .folder-item-inner-name {
    margin-left: 20px;
  }
  &:hover {
    background-color: #e5e7eacb;
  }
}
.folder-item.selected {
  background-color: #ecf5ff; // 选中行的背景颜色
}
.folder-list-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh;
}

.folder-item-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #999;
  font-size: 14px;

  .el-icon {
    font-size: 24px;
    margin-bottom: 8px;
  }
}
</style>
